import { JobOrderService } from './../../../@core/services/jobOrder/job-order.service';
import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { DataTableComponent, DialogService, DrawerService, IDrawerOpenResult, TableWidthConfig } from 'ng-devui';
import { SharedMethodService } from 'src/app/@core/services/Sharedmethod/shared-method.service';
import { AttachmentComponent } from 'src/app/@shared/components/attachment/attachment.component';
import { LogComponent } from 'src/app/@shared/components/log/log.component';
@Component({
  selector: 'app-product-job',
  templateUrl: './product-job.component.html',
  styleUrls: ['./product-job.component.scss']
})
export class ProductJobComponent {
  msgs: Array<Object> = [];
  rangeDate=[
  ];
  stateOptions=[
   '未核准','核准未派工','派工未完工','完工未完结','已完结'
  ]
  tableData:any[]=[
    {}
  ]
  dataTableOptions={
    columns:[
      {
          field: 'name',
          header: '工单号',
          fieldType: 'text',
          fixedLeft: '300px'
      },
      {
        field: 'name',
        header: '销售订单号',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '工单类型',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '产品编码',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '产品名称',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '规格型号',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '单位',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '计划数量',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '已入库数量',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '生产进度',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '生产状态',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '是否结案',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '计划开始时间',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '计划结束时间',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '实际开始时间',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '实际结束时间',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '工单优先级',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '工单附件',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '备注',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '工单日志',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '创建人',
        fieldType: 'text',
      },
      {
        field: 'name',
        header: '创建时间',
        fieldType: 'text',
      },

      {
        field: 'name',
        header: '状态',
        fieldType: 'text',
        fixedRight: '0px'
      },
    ]
  }
  checkedIds = [];
  pager = {
    total: 20,
    pageIndex: 1,
    pageSize: 20
  };
  optionsStatus = [
    "未核准",
    "已核准",
    "未派工",
    "已派工",
    "未完工",
    "已完工",
    "未完结",
    "已完结"
  ]
  tableWidthConfig: TableWidthConfig[] = [
    {
      field: 'checkbox',
      width: '80px'
    },
    {
      field:'操作',
      width:'220px'
    },
    {
      field:'工单号',
      width:'160px'
    },
    {
      field:'销售订单号',
      width:'150px'
    },
    {
      field:'销售订单号',
      width:'150px'
    },
    {
      field:'产品编码',
      width:'150px'
    },
    {
      field:'产品名称',
      width:'150px'
    },
    {
      field:'规格',
      width:'150px'
    },
    {
      field:'单位',
      width:'150px'
    },
    {
      field:'计划数量',
      width:'150px'
    },
    {
      field:'已入库数量',
      width:'150px'
    },
    {
      field:'进度',
      width:'150px'
    },
    {
      field:'是否结案',
      width:'150px'
    },
    {
      field:'生产状态',
      width:'150px'
    },
    {
      field:'PlanStartTime',
      width:'150px'
    },
    {
      field:'ActualStartTime',
      width:'150px'
    },
    {
      field:'PlanEndTime',
      width:'150px'
    },
    {
      field:'ActualEndTime',
      width:'150px'
    },
    {
      field:'ActualEndTime',
      width:'150px'
    },
    {
      field:'fujian',
      width:'150px'
    },
    {
      field:'note',
      width:'150px'
    },
    {
      field:'log',
      width:'150px'
    },
    {
      field:'创建人',
      width:'150px'
    },
    {
      field:'创建日期',
      width:'150px'
    },
    {
      field:'state',
      width:'150px'
    },
  ];
  pageSizeOptions = [10, 20, 30, 50, 100];
  // 限制表格最大高度，减少大面积重绘与回流
  partNum: string = null;
  partName: string = null;
  JobOrderNum: string = null;
  JobOrderStatus: string = null;
  JobOrderType: string = null;
  StartDate: string = null;
  EndDate: string = null;
  @ViewChild(DataTableComponent, { static: true }) datatable: DataTableComponent;
  constructor(private SharedMethodService:SharedMethodService,private JobOrderService:JobOrderService,private Router:Router,private drawerService: DrawerService,private dialogService:DialogService) { }
  ngOnInit(): void {
    this.JobOrderService.GetJobOrders(this.partNum,this.partName,this.JobOrderNum,this.JobOrderStatus,this.JobOrderType,null,this.StartDate,this.EndDate,this.pager.pageIndex,this.pager.pageSize).subscribe((data:any)=>{
      this.tableData=data.items
      this.pager.total=data.totalCount;
    })
  }
  pageIndexChange($event: any) {
    this.pager.pageIndex=$event;
    this.JobOrderService.GetJobOrders(this.partNum,this.partName,this.JobOrderNum,this.JobOrderStatus,this.JobOrderType,null,this.StartDate,this.EndDate,this.pager.pageIndex,this.pager.pageSize).subscribe((data:any)=>{
      this.tableData=data.items
      this.pager.total=data.totalCount;
    })
  }//切换页码
  pageSizeChange($event: any){
    this.JobOrderService.GetJobOrders(this.partNum,this.partName,this.JobOrderNum,this.JobOrderStatus,this.JobOrderType,null,this.StartDate,this.EndDate,this.pager.pageIndex,this.pager.pageSize).subscribe((data:any)=>{
      this.tableData=data.items
      this.pager.total=data.totalCount;
    })
  }//改变每页显示数量
  showToast(type: any,summary:any,content:any) {
    switch (type) {
    default:
      this.msgs = [{ severity: type, summary: summary, content: content }];
    }
  }//提示框
  rangeDateChange(event:any){
    this.rangeDate = event;
    this.StartDate = this.rangeDate[0].toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '/');
    this.EndDate = this.rangeDate[1].toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '/')
  }//日期范围选择
  cleared(){
    this.SharedMethodService.cleared(this.checkedIds,this.tableData,this.datatable).subscribe((data:any)=>{
      this.checkedIds=data;
    })
  }
  onRowCheckChange(checked: any, rowIndex: any, nestedIndex: any, rowItem: { $checked: any; $halfChecked: boolean; }) {
    this.SharedMethodService.onRowCheckChange(checked, rowIndex, nestedIndex, rowItem,this.datatable);
  }//单选
  getCheckedRows() {
    this.SharedMethodService.getCheckedRows(this.datatable,'jobOrderId').subscribe((data:any)=>{
      this.checkedIds=data;
    })
  }//获取选中行
  search(){
    this.JobOrderService.GetJobOrders(this.partNum,this.partName,this.JobOrderNum,this.JobOrderStatus,this.JobOrderType,null,this.StartDate,this.EndDate,this.pager.pageIndex,this.pager.pageSize).subscribe((data:any)=>{
      this.tableData=data.items
      this.pager.total=data.totalCount;
    })
  }
  search2(){
    this.pager.pageIndex=1;
    this.search()
  }
  reset(){
    this.partNum=null;
    this.partName=null;
    this.JobOrderNum=null;
    this.JobOrderStatus=null;
    this.JobOrderType=null;
    this.StartDate=null;
    this.EndDate=null;
    this.rangeDate = [];
    this.JobOrderService.GetJobOrders(this.partNum,this.partName,this.JobOrderNum,this.JobOrderStatus,this.JobOrderType,null,this.StartDate,this.EndDate,this.pager.pageIndex,this.pager.pageSize).subscribe((data:any)=>{
      this.tableData=data.items
      this.pager.total=data.totalCount;
    })
  }
  viewJob(id:any){
    this.Router.navigate(['/pages/product/job-detail/',id])
  }
  EditJob(id:any){
    this.Router.navigate(['/pages/product/edit-product-job/',id])
  }
  delete(id:any){
    this.JobOrderService.DeleteJobOrders([id]).subscribe((data:any)=>{
      this.showToast('success','成功','删除成功')
      this.search()
    },error=>{
      this.showToast('error','失败',error.error.message)
    })
  }
  deletes(){
    this.JobOrderService.DeleteJobOrders(this.checkedIds).subscribe((data:any)=>{
      this.showToast('success','成功','删除成功')
      this.search()
    },error=>{
      this.showToast('error','失败',error.error.message)
    })
  }
  Approval(id:any){
    this.JobOrderService.ApprovalJobOrder(id).subscribe((data:any)=>{
      this.showToast('success','核准成功','核准成功')
     this.search()
    },error=>{
      this.showToast('error','核准失败',error.error.message)
    })
  }
  unApproval(id:any){
    this.JobOrderService.UnApprovalJobOrder(id).subscribe((data:any)=>{
      this.showToast('success','取消核准成功','取消核准成功')
      this.search()
    },error=>{
      this.showToast('error','取消核准失败',error.error.message)
    })
  }
  results: IDrawerOpenResult;
  allLog(){
    this.JobOrderService.GetAllLogs().subscribe((data:any)=>{
      const logData = data.items
      const columns =  [
        {
          field: '工单号',
          header: '工单号',
          fieldType: 'text'
        },
        {
          field: 'content',
          header: '日志内容',
          fieldType: 'text'
        },
        {
          field: '执行人',
          header: '执行人',
          fieldType: 'text'
        },
        {
          field: '执行时间',
          header: '执行时间',
          fieldType: 'text'
        }
      ]

      this.results = this.drawerService.open({
        drawerContentComponent: LogComponent,
        width: '40%',
        data: {data:logData,columns:columns},
        zIndex: 1000,
        isCover: false,
        fullScreen: true,
        backdropCloseable: true,
        escKeyCloseable: true,
        position: 'right',
        resizable: true,
        onClose: () => {

        },
      });
    })
  }
  GetLogsByJobOrderId(id:any){
    this.JobOrderService.GetLogsByJobOrderId(id).subscribe((data:any)=>{
      const logData = data.items
      const columns =  [
        {
          field: '工单号',
          header: '工单号',
          fieldType: 'text'
        },
        {
          field: 'content',
          header: '日志内容',
          fieldType: 'text'
        },
        {
          field: '执行人',
          header: '执行人',
          fieldType: 'text'
        },
        {
          field: '执行时间',
          header: '执行时间',
          fieldType: 'text'
        }
      ]

      this.results = this.drawerService.open({
        drawerContentComponent: LogComponent,
        width: '40%',
        data: {data:logData,columns:columns},
        zIndex: 1000,
        isCover: false,
        fullScreen: true,
        backdropCloseable: true,
        escKeyCloseable: true,
        position: 'right',
        resizable: true,
        onClose: () => {

        },
      });
    })
  }
  onButtonClick(rowItem:any,dialogtype?:string) {
    const results = this.dialogService.open({
      title: '工单附件',
      width: '800px',
      backdropCloseable: false,
      data: {
        data: '工单附件',
        type: '查看',
        urls: rowItem.jobOrderFile
      },
      content: AttachmentComponent,
      dialogtype: dialogtype,
      onClose: () => {
      },
      buttons: [
        {
          cssClass: 'stress',
          text: '确定',
          handler: ($event: Event) => {
            results.modalInstance.hide();
          },
        },
        {
          id: 'btn-cancel',
          cssClass: 'common',
          text: '取消',
          handler: ($event: Event) => {
            results.modalInstance.hide();
          },
        },
      ],
    });
  }
  isCompleted:any;
  CompleteJobOrder(){
    this.isCompleted=true;
    this.CompleteOrReopenJobOrder()
  }
  ReopenJobOrder(){
    this.isCompleted=false;
    this.CompleteOrReopenJobOrder()
  }
  CompleteOrReopenJobOrder(dialogtype?:string){
    const results = this.dialogService.open({
      title: '结案',
      content: "是否确认结案",
      dialogtype: dialogtype,
      width:'600px',
      onClose: () => {
      },
      buttons: [
        {
          cssClass: 'stress',
          text: '确定',
          handler: ($event: Event) => {
            this.JobOrderService.CompleteOrReopenJobOrder(this.checkedIds,this.isCompleted).subscribe((data:any)=>{
              this.showToast('success','成功','操作成功')
              this.search()
            },error=>{
              this.showToast('error','失败',error.error.message)
            })
            results.modalInstance.hide();
          }
        },
        {
          id: 'btn-cancel',
          cssClass: 'common',
          text: '取消',
          handler: ($event: Event) => {
            results.modalInstance.hide();
          },
        },
      ],
    });
  }
  unCompleteOrReopenJobOrder(dialogtype?:string){
    const results = this.dialogService.open({
      title: '取消结案',
      content: "是否取消结案",
      dialogtype: dialogtype,
      width:'600px',
      onClose: () => {
      },
      buttons: [
        {
          cssClass: 'stress',
          text: '确定',
          handler: ($event: Event) => {
            this.JobOrderService.CompleteOrReopenJobOrder(this.checkedIds,false).subscribe((data:any)=>{
              this.showToast('success','成功','操作成功')
              this.search()
            },error=>{
              this.showToast('error','失败',error.error.message)
            })
            results.modalInstance.hide();
          }
        },
        {
          id: 'btn-cancel',
          cssClass: 'common',
          text: '取消',
          handler: ($event: Event) => {
            results.modalInstance.hide();
          },
        },
      ],
    });
  }

  // ================= 打印：工单 =================
  printSelected(): void {
    // 仅允许勾选一条工单打印
    if (!this.checkedIds || this.checkedIds.length !== 1) {
      this.showToast('warning', '提示', '请仅选择一条工单进行打印');
      return;
    }
    const id = this.checkedIds[0];
    // 为确保包含工序及物料明细，统一按ID加载详情后打印
    this.JobOrderService.GetJobOrderById(id).subscribe((data: any) => {
      const html = this.buildJobOrderPrintHtml(data);
      this.printWithIframe(html);
    });
  }

  private printWithIframe(html: string) {
    const iframe = document.createElement('iframe');
    iframe.style.position = 'fixed';
    iframe.style.right = '0';
    iframe.style.bottom = '0';
    iframe.style.width = '0';
    iframe.style.height = '0';
    iframe.style.border = '0';
    iframe.style.visibility = 'hidden';
    document.body.appendChild(iframe);

    const doc = iframe.contentDocument || iframe.contentWindow?.document as Document | undefined;
    if (!doc) {
      document.body.removeChild(iframe);
      return;
    }
    doc.open();
    doc.write(html);
    doc.close();

    setTimeout(() => {
      try {
        iframe.contentWindow?.focus();
        iframe.contentWindow?.print();
      } finally {
        setTimeout(() => {
          if (iframe && iframe.parentNode) {
            iframe.parentNode.removeChild(iframe);
          }
        }, 400);
      }
    }, 200);
  }

  private to2(n: any): string {
    const x = Number(n);
    if (isNaN(x)) return '';
    return x.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  }

  private fmtDateStr(input: any, withTime = false): string {
    if (!input) return '';
    const d = new Date(input);
    if (isNaN(d.getTime())) return String(input);
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, '0');
    const da = String(d.getDate()).padStart(2, '0');
    if (!withTime) return `${y}-${m}-${da}`;
    const hh = String(d.getHours()).padStart(2, '0');
    const mm = String(d.getMinutes()).padStart(2, '0');
    return `${y}-${m}-${da} ${hh}:${mm}`;
  }

  private buildJobOrderPrintHtml(order: any): string {
    const to2 = this.to2.bind(this);
    const now = this.fmtDateStr(new Date(), true);
    const style = `
      <style>
        @page { size: A4; margin: 12mm; }
        * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
        .sheet { width: 210mm; min-height: 297mm; margin: 0 auto; }
        .header { display: grid; grid-template-columns: 1fr auto; align-items: center; }
        .title { font-size: 20px; font-weight: 700; }
        .meta { font-size: 12px; color: #555; }
        table { width: 100%; border-collapse: collapse; margin-top: 8px; }
        th, td { border: 1px solid #333; padding: 6px 8px; font-size: 12px; }
        th { background: #f5f7fa; }
        .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 12px; margin-top: 8px; }
        .grid .cell { font-size: 12px; }
        .remark { margin-top: 10px; white-space: pre-wrap; }
        .footer { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
        .footer .cell { font-size: 12px; color: #555; }
  .sub-title { margin-top: 14px; font-weight: 700; font-size: 14px; }
  .muted { color: #666; }
  .process-block { margin-top: 8px; border: 1px solid #333; padding: 4px 6px; }
  .process-head { font-size: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 8px; }
  .process-head .item { white-space: normal; overflow: visible; text-overflow: initial; }
  .subtable th, .subtable td { font-size: 11px; }
      </style>
    `;

    const safe = (v: any) => v ?? '';
    const title = '生产工单';
    const headTable = `
      <table>
        <colgroup>
          <col style="width: 15%"/><col style="width: 35%"/>
          <col style="width: 15%"/><col style="width: 35%"/>
        </colgroup>
        <tbody>
          <tr><th>工单号</th><td>${safe(order?.jobNum)}</td><th>工单类型</th><td>${safe(order?.jobOrderType)}</td></tr>
          <tr><th>产品编码</th><td>${safe(order?.productNum)}</td><th>产品名称</th><td>${safe(order?.productName)}</td></tr>
          <tr><th>规格型号</th><td>${safe(order?.partType)}</td><th>单位</th><td>${safe(order?.uom)}</td></tr>
          <tr><th>计划数量</th><td>${safe(order?.productionQuantity)}</td><th>已入库数量</th><td>${safe(order?.receivedQuantity)}</td></tr>
          <tr><th>计划开始</th><td>${safe(order?.jobOrderPlanStartDate)}</td><th>计划结束</th><td>${safe(order?.jobOrderPlanEndDate)}</td></tr>
          <tr><th>实际开始</th><td>${safe(order?.jobOrderActualStartDate)}</td><th>实际结束</th><td>${safe(order?.jobOrderActualEndDate)}</td></tr>
          <tr><th>优先级</th><td>${safe(order?.orderPriority)}</td><th>销售订单号</th><td>${safe(order?.saleOrderNum) || '/'}</td></tr>
        </tbody>
      </table>
    `;

    const statusTable = `
      <table>
        <colgroup>
          <col style="width: 15%"/><col style="width: 35%"/>
          <col style="width: 15%"/><col style="width: 35%"/>
        </colgroup>
        <tbody>
          <tr>
            <th>派工状态</th><td>${order?.isAssign ? '已派工' : '未派工'}</td>
            <th>完工状态</th><td>${order?.isFinished ? '已完工' : '未完工'}</td>
          </tr>
          <tr>
            <th>是否结案</th><td>${order?.isLocked ? '已结案' : '未结案'}</td>
            <th>核准状态</th><td>${order?.isApproval ? '已核准' : '未核准'}</td>
          </tr>
        </tbody>
      </table>
    `;

    const remark = `<div class="remark"><b>备注：</b>${safe(order?.note)}</div>`;

    // 工序 + 工序物料
    const processes: any[] = Array.isArray(order?.jobOrderProcesses) ? order.jobOrderProcesses : [];
    const procBlocks = processes.map((p: any, idx: number) => {
      const mats: any[] = Array.isArray(p?.parts) ? p.parts : [];
      const matRows = mats.map((m: any) => `
          <tr>
            <td style="text-align:center;">${m?.partNumber ?? ''}</td>
            <td>${safe(m?.partNum)}</td>
            <td>${safe(m?.partName)}</td>
            <td style="text-align:right;">${m?.unitUsage != null ? to2(m?.unitUsage) : ''}</td>
            <td style="text-align:right;">${m?.lossRate != null ? to2(m?.lossRate) + '%' : ''}</td>
            <td style="text-align:right;">${m?.fixedLoss != null ? to2(m?.fixedLoss) : ''}</td>
            <td style="text-align:right;">${m?.requirementQuantity != null ? to2(m?.requirementQuantity) : ''} ${safe(m?.requirementUnit)}</td>
            <td style="text-align:right;">${m?.issuedQuantity != null ? to2(m?.issuedQuantity) : ''} ${safe(m?.issuedUnit)}</td>
            <td style="text-align:center;">${m?.isIssueFinished ? '是' : '否'}</td>
            <td>${safe(m?.partNote)}</td>
          </tr>
        `).join('');

      const materialTable = mats.length ? `
          <table class="subtable">
            <thead>
              <tr>
                <th style="width:70px;">物料序号</th>
                <th style="width:130px;">物料编码</th>
                <th style="width:200px;">物料名称</th>
                <th style="width:90px;">单位用量</th>
                <th style="width:80px;">损耗率</th>
                <th style="width:90px;">固定损耗</th>
                <th style="width:150px;">需求数量(单位)</th>
                <th style="width:150px;">已发数量(单位)</th>
                <th style="width:80px;">发料完成</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              ${matRows}
            </tbody>
          </table>
        ` : '';

      return `
        <div class="process-block">
          <div class="process-head">
            <div class="item"><b>工序序号：</b>${safe(p?.processNumber)}</div>
            <div class="item"><b>工序编码：</b>${safe(p?.processNum)}</div>
            <div class="item"><b>工序名称：</b>${safe(p?.processName)}</div>
            <div class="item"><b>计划产量：</b>${safe(p?.productionQuantity)}</div>
            <div class="item"><b>标准工时：</b>${p?.standardWorkingHours != null ? to2(p?.standardWorkingHours) : ''} ${safe(p?.workingHoursUnit)}</div>
              <div class="item"><b>计划开工：</b>${safe(this.fmtDateStr(p?.planStartTime, true))}</div>
              <div class="item"><b>计划完工：</b>${safe(this.fmtDateStr(p?.planFinishTime, true))}</div>
              <div class="item"><b>派工状态：</b>${p?.isAssign ? '已派' : '未派'}</div>
              <div class="item"><b>开工状态：</b>${p?.isStart ? '已开' : '未开'}</div>
              <div class="item"><b>完工状态：</b>${p?.isFinished ? '已完' : '未完'}</div>
            <div class="item"><b>报工合格数：</b>${p?.reportedAmount != null ? to2(p?.reportedAmount) : ''}</div>
          </div>
          ${materialTable}
        </div>
      `;
    }).join('');

    const processSection = `
      <div class="sub-title">工序与物料</div>
      ${processes.length ? procBlocks : '<div class="muted">无工序信息</div>'}
    `;

    const html = `
      <!doctype html>
      <html>
        <head>
          <meta charset="utf-8" />
          <title>${title}</title>
          ${style}
        </head>
        <body>
          <div class="sheet">
            <div class="header">
              <div class="title">${title}</div>
              <div class="meta">打印时间：${now}</div>
            </div>
            ${headTable}
            ${statusTable}
            ${remark}
            ${processSection}
            <div class="footer">
              <div class="cell">制单人：${safe(order?.creator)}</div>
              <div class="cell">制单时间：${safe(order?.createTime)}</div>
              <div class="cell">审核人：</div>
              <div class="cell">审核时间：</div>
            </div>
          </div>
        </body>
      </html>
    `;
    return html;
  }
}
